<template>
	<view class="shopcart">
		<view class="cartMax" v-if="data">
			<image class="indexImage" src="https://v5.vdsc.cc/public/uniapp/common/common-empty.png" mode=""></image>
			<br />
			<text class="textFirst">购物车为空</text><br />
			<text>赶紧去逛逛, 购买心仪的商品吧</text>
			<button class="btnWarn" type="warn">去登录</button>
			<view class="line">
				<view class="lineLeft"></view>
				<text>猜你喜欢</text>
				<view class="lineRight"></view>
			</view>
			<view class="box">
				<view v-for="item,i in list" class="botto-min">
					<image src="../../static/tablelogo2.png" mode=""></image>
					<text>{{item.cost_price}}</text>
					<text>已售{{item.goods_number}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsindex
	} from "../../utils/ajax.js"
	export default {
		data() {
			return {
				data: 1,//未登录页面显示隐藏
				list:[]
			}
		},
		onLoad() {
			goodsindex({
				shop_id: 1
			}).then(res=>{
				this.list=res.data.data.data
				console.log(this.list);
			})
		},
		methods: {}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.shopcart {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

	.cartMax {
		/* position: relative; */
		width: 700rpx;
		/* height: 600rpx; */
		/* background-color: pink; */
		margin: 0 auto;
		text-align: center;
		color: #999999;
	}

	.textFirst {
		display: inline-block;
		font-size: 50rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.btnWarn {
		border-radius: 50rpx;
		width: 350rpx;
		margin: 40rpx auto;
		background-color: red;
	}
	.line{
		width: 350rpx;
		margin: 80rpx auto;
		display: flex;
		justify-content: space-between;
		color: #505050;
	}
	.lineLeft,.lineRight {
		width: 100rpx;
		height: 1rpx;
		background-color: #505050;
		margin-top: 20rpx;
	}
	.box{
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
	}
	.box .botto-min{
		width: 340rpx;
		height: 300rpx;
		background-color: white;
	}
	.botto-min  image{
		width: 300rpx;
		height: 200rpx;
	}
</style>
